<template>
	<view class="content">
		<view class="list">
			<view class="list-call">
				<uni-easyinput class="sl-input" :inputBorder="false" prefixIcon="personadd-filled" v-model="registerDto.UserName" placeholderStyle="font-size: 15px" :placeholder="$t('pages.sys.login.userNamePlaceholder')" />
			</view>
			<view class="list-call">
				<uni-easyinput class="sl-input" :inputBorder="false" prefixIcon="contact-filled" v-model="registerDto.NickName" placeholderStyle="font-size: 15px" :placeholder="$t('pages.sys.login.nickNamePlaceholder')" />
			</view>
			<view class="list-call">
				<uni-easyinput class="sl-input" :inputBorder="false" prefixIcon="locked-filled" type="password" v-model="registerDto.Password" placeholderStyle="font-size: 15px" :placeholder="$t('pages.sys.login.passwordPlaceholder')" />
			</view>
			<view class="list-call">
				<uni-easyinput class="sl-input" :inputBorder="false" prefixIcon="locked-filled" type="password" v-model="registerDto.ConfirmPassword" placeholderStyle="font-size: 15px" :placeholder="$t('pages.sys.login.confirmPasswordPlaceholder')" />
			</view>
			<view class="list-call">
				<uni-easyinput class="sl-input" :inputBorder="false" prefixIcon="phone-filled" type="number" v-model="registerDto.PhoneNumber" placeholderStyle="font-size: 15px" :placeholder="$t('pages.sys.login.mobilePlaceholder')" />
			</view>
			<view class="list-call">
				<uni-easyinput class="sl-input" :inputBorder="false" prefixIcon="chat-filled" v-model="registerDto.SmsCode" placeholderStyle="font-size: 15px" :placeholder="$t('pages.sys.login.smsCodePlaceholder')" />
				<view class="countdownButton" :class="{ countdownButtonWait: second > 0 }" @tap="handleSmsVerifyCode">{{ countdownText }}</view>
			</view>
			<view class="list-call">
				<uni-easyinput class="sl-input" :inputBorder="false" prefixIcon="chat-filled" v-model="registerDto.VerifyCode" placeholderStyle="font-size: 15px" :placeholder="$t('pages.sys.login.verifyCodePlaceholder')" />
				<image class="verifyCodeImg" @tap="refreshVerifyCode" :src="verifyCodeImg"></image>
			</view>
		</view>
		
		<view class="button-submit" hover-class="button-submit-hover" @tap="handleSubmit">
			<text>{{ $t('common.submitText') }}</text>
		</view>
		
		<view class="agreement">
			<image @tap="agreementSuccess"
				:src="agreement === true ? '/static/images/app/radio_on_orange@48x.png' : '/static/images/app/radio_off_orange@48x.png'"></image>
			<text @tap="agreementSuccess">{{ $t('common.agreeText') }}</text>
			<navigator url="/pages/sys/login/agreement?id=1" open-type="navigate">{{ $t('common.agreementText') }}</navigator>
		</view>
		
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
		
		<view style="margin-top: 80rpx;" />
	</view>
</template>

<script>
	import { isMobileNumber } from '@/enums/regexEnum';
	import { sendSmsVerifyCode } from '@/apis/sms';
	import { getVerifyCode } from '@/apis/sys';
	import { register } from '@/apis/identity';
	let _this, js;
	export default {
		onLoad() {
			_this = this;

		},
		onUnload() {
			const that = this;
			clearInterval(js)
			that.second = 0;
		},
		data() {
			return {
				registerDto: {
					UserName: '',
					NickName: '',
					Password: '',
					ConfirmPassword: '',
					Email: '',
					EmailConfirmUrl: '',
					PhoneNumber: '',
					SmsCode: '',
					SmsCodeId: '',
					OrganizationId: '',
					VerifyCode: '',
					VerifyCodeId: '',
				},
				agreement: true,
				verifyCodeImg: null,
				msgType: '',
				messageText: '',
				second: 0
			};
		},
		computed: {
			countdownText() {
				const that = this;
				if (that.second == 0) {
					return that.$t('component.countdown.normalText');
				} else {
					if (that.second < 10) {
						// return '重新获取0' + that.second;
						return `${that.$t('component.countdown.sendText')}0${that.second}`;
					} else {
						// return '重新获取' + that.second;
						return `${that.$t('component.countdown.sendText')}${that.second}`;
					}
				}
			}
		},
		async onShow() {
			const that = this;
			// 导航栏多语言
			uni.setNavigationBarTitle({
				title: that.$t('pages.sys.login.signUpText'),
			});
			/** 刷新验证码 */
			const verifyCodeDto = await getVerifyCode();
			// console.log('VerifyCode', verifyCodeDto);
			that.registerDto.VerifyCodeId = verifyCodeDto.Id;
			that.verifyCodeImg = verifyCodeDto.Image;
		},
		onUnload() {
			const that = this;
			that.clear()
		},
		methods: {
			clear() {
				const that = this;
				clearInterval(js)
				js = null
				that.second = 0
			},
			agreementSuccess() {
				const that = this;
				that.agreement = !that.agreement;
			},
			/** 处理短信验证码 */
			async handleSmsVerifyCode() {
				const that = this;
				if (_this.second > 0) {
					return;
				}
				if (that.registerDto.PhoneNumber === undefined || that.registerDto.PhoneNumber === null || that.registerDto.PhoneNumber === '') {
					that.msgType = 'warn';
					that.messageText = that.$t('pages.sys.login.mobilePlaceholder');
					that.$refs.message.open();
					return;
				}
				if (!isMobileNumber(that.registerDto.PhoneNumber)) {
					that.msgType = 'error';
					that.messageText = that.$t('pages.sys.login.mobileFormatError');
					that.$refs.message.open();
					return;
				}
				// console.log('handleSmsVerifyCode');
				try {
					uni.showLoading({
						title: that.$t('common.loadingText'),
						mask: true
					});
					
					const dto = { PhoneNumber: that.registerDto.PhoneNumber, mode: 'modal' };
					const result = await sendSmsVerifyCode(dto);
					if(result.Type !== 200){
						uni.hideLoading();
						return;
					}
					that.registerDto.SmsCodeId = result.Data;
					
					uni.hideLoading();
					_this.second = 60;
					js = setInterval(function() {
						_this.second--;
						if (_this.second == 0) {
							_this.clear()
						}
					}, 1000);
				}
				catch(err) {} 
				finally {
					uni.hideLoading();
				}
			},
			/** 刷新验证码 */
			async refreshVerifyCode() {
				const that = this;
				const verifyCodeDto = await getVerifyCode();
				// console.log('VerifyCode', verifyCodeDto);
				that.registerDto.VerifyCodeId = verifyCodeDto.Id;
				that.verifyCodeImg = verifyCodeDto.Image;
			},
			/** 处理提交 */
			async handleSubmit() {
				const that = this;
				if (that.agreement !== true) {
					that.msgType = 'warn';
					that.messageText = that.$t('pages.sys.login.policyPlaceholder');
					that.$refs.message.open();
					return;
				}
				
				if (that.registerDto.UserName === undefined || that.registerDto.UserName === null || that.registerDto.UserName === '') {
					that.msgType = 'warn';
					that.messageText = that.$t('pages.sys.login.userNamePlaceholder');
					that.$refs.message.open();
					return;
				}
				if (that.registerDto.NickName === undefined || that.registerDto.NickName === null || that.registerDto.NickName === '') {
					that.msgType = 'warn';
					that.messageText = that.$t('pages.sys.login.nickNamePlaceholder');
					that.$refs.message.open();
					return;
				}
				if (that.registerDto.Password === undefined || that.registerDto.Password === null || that.registerDto.Password === '') {
					that.msgType = 'warn';
					that.messageText = that.$t('pages.sys.login.passwordPlaceholder');
					that.$refs.message.open();
					return;
				}
				if (that.registerDto.ConfirmPassword === undefined || that.registerDto.ConfirmPassword === null || that.registerDto.ConfirmPassword === '') {
					that.msgType = 'warn';
					that.messageText = that.$t('pages.sys.login.confirmPasswordPlaceholder');
					that.$refs.message.open();
					return;
				}
				if (that.registerDto.Password !== that.registerDto.ConfirmPassword) {
					that.msgType = 'error';
					that.messageText = that.$t('pages.sys.login.diffPwd');
					that.$refs.message.open();
					return;
				}
				
				if (that.registerDto.PhoneNumber !== undefined && that.registerDto.PhoneNumber !== null && that.registerDto.PhoneNumber !== '') {
					if (!isMobileNumber(that.registerDto.PhoneNumber)) {
						that.msgType = 'error';
						that.messageText = that.$t('pages.sys.login.mobileFormatError');
						that.$refs.message.open();
						return;
					}
					
					if (that.registerDto.SmsCode === undefined || that.registerDto.SmsCode === null || that.registerDto.SmsCode === '') {
						that.msgType = 'warn';
						that.messageText = that.$t('pages.sys.login.smsCodePlaceholder');
						that.$refs.message.open();
						return;
					}
					if (that.registerDto.SmsCodeId === undefined || that.registerDto.SmsCodeId === null || that.registerDto.SmsCodeId === '') {
						that.msgType = 'error';
						that.messageText = that.$t('pages.sys.login.smsCodeInvalid');
						that.$refs.message.open();
						return;
					}
				}
				
				if (that.registerDto.VerifyCode === undefined || that.registerDto.VerifyCode === null || that.registerDto.VerifyCode === '') {
					that.msgType = 'warn';
					that.messageText = that.$t('pages.sys.login.verifyCodePlaceholder');
					that.$refs.message.open();
					return;
				}
				if (that.registerDto.VerifyCodeId === undefined || that.registerDto.VerifyCodeId === null || that.registerDto.VerifyCodeId === '') {
					that.msgType = 'error';
					that.messageText = that.$t('pages.sys.login.verifyCodeInvalid');
					that.$refs.message.open();
					return;
				}
				
				try {
					uni.showLoading({
						title: that.$t('common.loadingText'),
						mask: true
					});
					
					// const dto = {
					// 	UserName: that.registerDto.UserName,
					// 	NickName: that.registerDto.NickName,
					// 	Password: that.registerDto.Password,
					// 	ConfirmPassword: that.registerDto.ConfirmPassword,
					// 	Email: that.registerDto.Email,
					// 	EmailConfirmUrl: that.registerDto.EmailConfirmUrl,
					// 	PhoneNumber: that.registerDto.PhoneNumber,
					// 	SmsCode: that.registerDto.SmsCode,
					// 	SmsCodeId: that.registerDto.SmsCodeId,
					// 	OrganizationId: that.registerDto.OrganizationId,
					// 	VerifyCode: that.registerDto.VerifyCode,
					// 	VerifyCodeId: that.registerDto.VerifyCodeId
					// };
					const dto = that.registerDto;
					// console.log('handleSubmit', dto);
					const result = await register(dto, 'modal');
					if(result.Type !== 200){
						uni.hideLoading();
						return;
					}
					
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: that.$t('common.successText'),
						mask: true
					});
					
					setTimeout(function () {
					    uni.navigateBack();
					}, 1500);
				}
				catch(err) {} 
				finally {
					uni.hideLoading();
				}
			}
		}
	}
</script>

<style>
	page {
	    display: flex !important;  
	    align-items: center !important;  
		flex-direction: column !important;
		justify-content: center !important;
	}
	
	.content {
		/* display: flex; */
		/* flex-direction: column; */
		/* justify-content: center; */
		width: 100vw;
		/* background-color: red; */
	}
	
	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}
	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		border-bottom: 0.5px solid #e2e2e2;
	}
	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
	}
	
	/deep/ .uni-easyinput__content{
	  background-color: #f5f5f5 !important;
	}
	
	.verifyCodeImg {
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: 200rpx;
		height: 90rpx;
	}
	
	.countdownButton {
		color: #FF7D13;
		font-size: 24rpx;
		line-height: 64rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: auto;
		height: 64rpx;
		border: 1rpx solid #FFA800;
		border-radius: 50rpx;
	}
	.countdownButton:active {
		background: linear-gradient(-90deg, rgba(255, 131, 30, 0.5), rgba(255, 131, 30, 0.5));
	}
	.countdownButtonWait {
		color: #999999 !important;
		border: 1rpx solid #999999;
	}
	
	.button-submit {
		color: #FFFFFF;
		font-size: 35rpx;
		width: 500rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(60, 156, 255, 1), rgba(60, 156, 255, 1));
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 80rpx;
	}
	.button-submit:active {
		background: linear-gradient(-90deg, rgba(60, 156, 255, 0.5), rgba(60, 156, 255, 0.5));
	}
	.button-submit-hover {
		background: linear-gradient(-90deg, rgba(60, 156, 255, 0.8), rgba(60, 156, 255, 0.8));
	}
	
	.agreement {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		margin-top: 80rpx;
		color: #FFA800;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}
	.agreement image {
		width: 40rpx;
		height: 40rpx;
	}
</style>
